<template>
  <div>
    <div class="pc">
      <!-- <div class="product_nav"></div>
      <div class="product_banner"></div>-->
      <integral-banner></integral-banner>
      <!-- 信息 -->
      <div :class="['product_message', oneshow ? 'product_message_i' : '']" id="one" ref="onemess">
        <div class="message_contant message_contant_one">
          <div class="message_contant_l">
            <img src="../../assets/images/product/one01.png" alt />
            <div class="message_contant_contant">
              <h3>积分兑了么是什么样的平台</h3>
              <span>积分兑了么是专业提供银行积分兑现服务。通过“积分兑换券码-报单-审核提现”模式，安全、快速的将银行积分变现。</span>
            </div>
          </div>
          <div class="message_contant_r">
            <img src="../../assets/images/product/one02.png" alt />
          </div>
        </div>
      </div>
      <div
        :class="[
        'product_message product_messagetwo',
        towshow ? 'product_messagetwo_i' : ''
      ]"
        id="two"
      >
        <div class="message_contant message_contant_two">
          <div class="message_contant_l">
            <img src="../../assets/images/product/two01.png" alt />
            <div class="message_contant_contant">
              <h3>如何通过积分兑了么赚钱</h3>
              <span>
                个人银行积分变现 ，代理/黄金会员赚用户兑换差价
                代理/黄金会员赚推荐奖励。
              </span>
            </div>
          </div>
          <div class="message_contant_r">
            <img src="../../assets/images/product/two02.png" alt />
          </div>
        </div>
      </div>
      <div :class="['product_message', threeshow ? 'product_message_ti' : '']" id="three">
        <div class="message_contant message_contant_three">
          <div class="message_contant_l">
            <img src="../../assets/images/product/three01.png" alt />
            <div class="message_contant_contant">
              <h3>积分兑了么产品优势</h3>
              <span>
                全国首家积分兑换平台，直接将信用卡积分兑换现金的平台。支持40+银
                行积分/三网积分，积分兑换引领者，无线裂变体系，互联网裂变几何倍
                增无线层级的用户，赚取无线下级用户差价分润/伯乐分润，专业团队，
                5年支付经验，懂支付，懂信用卡更懂积分，自有技术团队，不断升级，
                优化用户体验
              </span>
            </div>
          </div>
          <div class="message_contant_r">
            <img src="../../assets/images/product/three02.png" alt />
          </div>
        </div>
      </div>
      <!-- 介绍 -->
      <div :class="['product_introduce', fourshow ? 'product_introduce_i' : '']" id="four">
        <div class="product_introduce_contant">
          <div class="left">
            <div
              :class="['left_item', list_index == index ? 'left_item_item' : '']"
              v-for="(item, index) in list"
              :key="index"
              @mouseenter="change(index)"
            >{{ item.lefttitle }}</div>
          </div>
          <div
            :class="['right', list_index == index ? 'right_show' : '']"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="right_item" v-for="(items, index) in item.right_list" :key="index">
              <div class="right_item_top">
                <img :src="items.src" alt />
                <div class="right_item_top_title">{{ items.title }}</div>
                <span>{{ items.assistant }}</span>
              </div>
              <p>{{ items.info }}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 积分兑了吗 -->
      <div class="integral_bot">
        <div class="contant">
          <div class="pic">
            <img src="../../assets/images/index/down2.png" alt />
            <img class="ewm" src="../../assets/images/index/ewm.png" alt />
          </div>
          <div class="downapp_contant">
            <div class="one">积分兑了么</div>
            <div class="two">综合性的银行积分兑换平台</div>
            <div class="three">下载app</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 移动端 -->
    <m-product></m-product>
  </div>
</template>

<script>
import integralBanner from "@/components/integralbanner/integralbanner.vue";
import mProduct from "./mproduct";
export default {
  components: {
    integralBanner,
    mProduct
  },
  data() {
    return {
      list_index: 0,
      list: [
        {
          lefttitle: "行业开创者",
          right_list: [
            {
              src: require("../../assets/images/icon/001.png"),
              title: "全国首家",
              assistant: "first in country",
              info:
                "2018年3月8日积分兑了么正式上线，瞬间引爆整个积分市场，开启了积分兑换行业的元年。"
            },
            {
              src: require("../../assets/images/icon/002.png"),
              title: "瑶瑶领先",
              assistant: "Far Ahead",
              info:
                "积分兑了么，不断优化升级，提高用户体验，注册用户和兑换数据遥遥领先同行的模仿者。"
            },
            {
              src: require("../../assets/images/icon/003.png"),
              title: "不断创新",
              assistant: "Innovation",
              info:
                "积分兑换功能首创，信用卡优惠信息全国独家发布，会员晋升制度不断优化，始终引领整个行业的发展。"
            },
            {
              src: require("../../assets/images/icon/004.png"),
              title: "团队成熟时",
              assistant: "Team Maturity",
              info:
                "磨砺多年的团队，志同道合的原始创业团队，不断发展壮大，稳定而醇熟"
            }
          ]
        },
        {
          lefttitle: "上游渠道",
          right_list: [
            {
              src: require("../../assets/images/icon/005.png"),
              title: "打通40+家银行",
              assistant: "Through 40+ Banks",
              info:
                "第一家打通40+银行的积分兑换平台，确保信用卡用户覆盖率达到90%以上。"
            },
            {
              src: require("../../assets/images/icon/006.png"),
              title: "三网积分渠道",
              assistant: "Three network integration channels",
              info: "第一家打通全部手机运营商的积分兑换平台，覆盖人群更加广泛。"
            },
            {
              src: require("../../assets/images/icon/007.png"),
              title: "100%一手资源",
              assistant: "Firsthand resources",
              info:
                "所有银行和三网积分兑换的上游渠道，100%自主建立，确保用户报单的安全、快速审核。"
            },
            {
              src: require("../../assets/images/icon/008.png"),
              title: "安全稳定",
              assistant: "Safety and stability",
              info:
                "开创了积分兑换行业，并且及时新增了全行业独家发布的信用卡优惠资讯，优化用户报单体验。"
            }
          ]
        },
        {
          lefttitle: "技术团队",
          right_list: [
            {
              src: require("../../assets/images/icon/009.png"),
              title: "自有技术团队",
              assistant: "Own technical team",
              info:
                "积分兑了么作为创新性互联网企业，拥有强大的自有技术团队，满足各种技术开发的需求，才能不断适应积分行业迅速变化的市场环境。"
            },
            {
              src: require("../../assets/images/icon/010.png"),
              title: "成功开发经验",
              assistant: "Successful development experience",
              info:
                "积分兑了么成立以来，已经成功开发并运作了多个成功的APP，都已经成为各自细分领域的知名互联网产品。"
            },
            {
              src: require("../../assets/images/icon/011.png"),
              title: "版本迭代",
              assistant: "Version of the iteration",
              info:
                "积分兑了么不断优化升级，不管是产品UI界面、会员模式，还是用户体验，都遥遥领先同行的模仿者。"
            },
            {
              src: require("../../assets/images/icon/012.png"),
              title: "用户极致体验",
              assistant: "Extreme user experience",
              info:
                "开创了积分兑换行业，并且及时新增了全行业独家发布的信用卡优惠资讯，优化用户报单体验。"
            }
          ]
        },
        {
          lefttitle: "运营经验",
          right_list: [
            {
              src: require("../../assets/images/icon/013.png"),
              title: "资深玩卡经验团队",
              assistant: "Senior card playing experience team",
              info:
                "积分兑了么的创业团队成员，全都是一群志同道合的资深玩卡大神，因为共同的梦想和兴趣走到一起。"
            },

            {
              src: require("../../assets/images/icon/014.png"),
              title: "专业的信用卡优惠资讯平台",
              assistant:
                "Professional credit card discount information platform",
              info:
                "积分兑了么的信用卡优惠信息，银行秒杀、卡友百科、玩赚积分等版块，是由微付网络专业的自媒体团队精心打造、每天更新，已经成为行业独家发布的玩卡圣地。"
            },
            {
              src: require("../../assets/images/icon/015.png"),
              title: "全年无休服务",
              assistant: "Year-round service",
              info:
                "365天全年无休，客服全程在线指导，确保用户兑换的流畅性和可及性。"
            },
            {
              src: require("../../assets/images/icon/016.png"),
              title: "专业&丰富经验的客服团队",
              assistant: "The most experienced customer service team",
              info:
                "365天全年无休模式客服全程在线指导，确保了用户体验和服务稳定性。"
            }
          ]
        }
      ],
      pageheight: "", //网页可视区的高度
      scrollTop: "", //服你懂距离的高度
      oneheight: "", //第一个距离顶部的高度
      twoheight: "", //第一个距离顶部的高度
      towshow: false,
      oneshow: false,
      threeshow: false,
      threeheight: "", //第一个距离顶部的高度
      fourheight: "",
      fourshow: false
    };
  },
  mounted() {
    let that = this;
    this.onetop();
    this.twotop();
    this.threetop();
    this.fourtop();
    that.oneshow = true;
    this.pageheight = document.documentElement.clientHeight;
    // console.log(this.pageheight);
    window.addEventListener("scroll", that.handleScroll);
  },
  methods: {
    change(key) {
      this.list_index = key;
    },

    onetop() {
      var one = document.getElementById("one");
      // this.oneheight = one.getBoundingClientRect().top;
      this.oneheight = one.offsetTop;
      // console.log(one.getBoundingClientRect().top); //元素距离可视区顶部的距离
    },
    twotop() {
      var two = document.getElementById("two");
      this.twoheight = two.offsetTop;

      // console.log(two.getBoundingClientRect().top); //元素距离可视区顶部的距离
    },
    threetop() {
      var three = document.getElementById("three");
      this.threeheight = three.offsetTop;
      console.log(three.getBoundingClientRect().top); //元素距离可视区顶部的距离
    },
    fourtop() {
      var four = document.getElementById("four");
      this.fourheight = four.offsetTop;
      // console.log(this.fourheight); //元素距离可视区顶部的距离
    },
    // 滚动事件
    handleScroll() {
      // eslint-disable-next-line no-undef
      let scrollTop = document.documentElement.scrollTop;
      // console.log(scrollTop);
      // console.log(scrollTop);
      // console.log(this.twoheight);
      // console.log(this.pageheight);
      // console.log(document.documentElement.scrollTop); //页面滚动得距离
      // let height = scrollTop - this.pageheight;
      if (scrollTop > this.twoheight - this.pageheight) {
        this.towshow = true;
      }
      if (scrollTop > this.threeheight - this.pageheight) {
        this.threeshow = true;
      }
      if (scrollTop > this.fourheight - this.pageheight) {
        // console.log(this.fourheight - this.pageheight);
        this.fourshow = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import url("../../assets/scss/product/product.css");
</style>
